<template>
  <common-echart :pos="pos" @getMychart="getMychart" width="320" height="140"></common-echart>
</template>

<script setup>
  import { reactive, computed, ref, onMounted, nextTick } from 'vue'
  import commonEchart from '@/components/commonEchart.vue'
  const { pos } = defineProps({
    pos: {
      type: String,
      required: true
    }
  })
  let myChart = ref({})
  let total = ref(1)
  // 1. 定义 data
  let data = reactive({
    isSet: null, // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
    charPie3currentIndex: 0,
    myColor: ['#616bfb', '#41c7ff', '#30efbf'],
    dataList1: [215, 3077],
    dataTitle: ['已停车辆', '剩余车位'],
    dataSeries: [],
    resObj: {},
  })
  // 1.1 从接口获取数据
  const getData = async() => {
    const {data: data0} = await getPopulationTotal()
    // console.log(data0);
    if(data0.code != 200){
      return 
    }

    // 1.1.1 获取真实数据data0以后，把data0数据push到data中
    data.dataList1 = []
    data0.data.age.forEach((item, index) => {
      data.dataList1.push(item)
    })
    // 1.1.2 进一步加工
    dealData(data)
  }
  // 1.2 二次加工并更新图表
  const dealData = (data) => {
    data.dataList1.forEach((item, index) => {
      data.dataSeries.push({
        value: item,
        name: data.dataTitle[index],
      })
    })
    total = computed(() => eval(data.dataList1.join("+")))
    for (let i in data.dataSeries) {
      data.resObj[data.dataSeries[i]["name"]] = data.dataSeries[i];
    }
    
    // 更新图表数据
    fresh(data)
  }

  // 2. 定义图表编辑项 option
  let option = reactive({})
  const getOption = (data) =>{
    return {
      // backgroundColor: 'rgba(13,29,70,0.75)',
      grid: {
        left: '5%',
        right: '8%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
      },
      legend: {
        icon: "circle",
        orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
        x: '55%',
        y: '25%',
        textStyle: {
          color: "#FFFFFF",
          fontSize: 15
        },
        formatter: function(name) {
          return name + '   ' + data.resObj[name].value
        }
      },
      color: data.myColor,
      series: {
        hoverOffset: 4,
        itemGap: 20,
        name: '访问来源',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['22%', '50%'],
        data: data.dataSeries,
        legendHoverLink:false,
        // avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        labelLine: {
          show: false
        },
        emphasis: {
          scale: true,
          scaleSize: 20,
          focus: 'self',
          label: {
            // formatter: "{b}\n{d}%",
            formatter: function(params){
              return params.name+'\n'+'{tlabel|'+(params.value/total.value*100).toFixed(0)+'%'+'}'
            },
            show: true,
            color: "#fff",
            fontSize: 10,
            lineHeight:24,
            rich:{
              tlabel:{
                fontSize: 16,
                // fontFamily:'DIN'
              }
            },
            fontWeight: 'bold'
          },
        },
        itemStyle: {
          borderRadius: 2,
          // borderWidth: 10, //设置border的宽度有多大
        },
      }
    }
  }

  // 3. 得到mychart实例并暴露出去，处理进一步交互
  let getMychart = ([myChart_0, id]) => {
    myChart.value = myChart_0
    // 对子组件传回来的 myChart 进行进一步交互处理
    myChart_0.on('mouseover', param => {
      clearInterval(data.isSet)
      // 取消之前高亮的图形
      myChart_0.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: data.charPie3currentIndex
      })
      // 高亮当前图形
      myChart_0.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: param.dataIndex
      })
      data.charPie3currentIndex = param.dataIndex
    })
    var chartHover = function () {
      var dataLen = option.series.data.length
      // 取消之前高亮的图形
      myChart_0.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: data.charPie3currentIndex
      })
      data.charPie3currentIndex = (data.charPie3currentIndex + 1) % dataLen
      // 高亮当前图形
      myChart_0.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: data.charPie3currentIndex
      })
    }
    data.isSet = setInterval(chartHover, 2000)
    // 4、鼠标移出之后，恢复自动高亮
    myChart_0.on('mouseout', param => {
      data.isSet = setInterval(chartHover, 2000)
    })
  }

  // setOption 这里不需要修改
  let fresh = (data) => {
    nextTick(() => {
      // 处理好data后，拿去生成option
      option = getOption(data)
      myChart.value.setOption(option)
    })
  }

  onMounted(()=> {
    // 1. 若接入了数据，运行
    // getData()

    // 2. 若没有接入数据，运行
    dealData(data)
  })
</script>

<style lang="scss" scoped></style>